<template>
    <div class="nav-header">
      <ul>
        <li>
           <router-link to="/home">首页</router-link>
        </li>
        <li>
          <router-link to="/artists">歌手</router-link>
        </li>
        <li>
          <router-link to="/ucenter">我的</router-link>
        </li>
        <li>
          <router-link to="/search">搜索</router-link>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "nav-header"
    }
</script>

<style scoped lang="less">
 .nav-header{
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 100;
   left: 0;
   ul{
     display: flex;
     background-color: #f3f3f3;
     li{
         flex: 1;
         font-size: 16px;
         height: 44px;
         line-height: 44px;
         text-align: center;
         position: relative;
         a{
           color: #333;
           position: relative;
         }
         a.active:after{
           content: '';
           position: absolute;
           bottom: -10px;
           left: 0;
           width: 100%;
           height: 2px;
           background-color: #e13228;

         }
     }
   }
 }


</style>
